<template>
  <div class="content-lists">
    <div class="turn">
      <div class="alllist" v-if="Tabflag">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
        <router-link
          tag="div"
          :to="'/detail?id=' + item.id"
          class="lists-item"
          v-for="item in list"
          :key="item.id"
        >
          <div
            class="img"
            :style="{ 'background-image': 'url(https://pic.ecook.cn/web/'+item.imageid+'.jpg!wl280)' }"
            v-lazy:background-image="'https://pic.ecook.cn/web/'+item.imageid+'.jpg!wl280'"
          >
          <img class="exclusive" v-if="item.exclusive" src="../assets/images/fl_bg_dj.png" alt="">
          </div>
          <div class="img-txt">
            <h2 class="one-txt-cut">{{ item.name }}</h2>
            <h4 class="line-ellipsis">{{ item.content }}</h4>
          </div>
        </router-link>
          </van-list>
        </van-pull-refresh>
      </div>
      <div class="videoList" v-else>
        <!-- <van-empty description="目前没有内容" /> -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
        <div
          class="lists-item"
          v-for="item in list"
          :key="item.id"
        >
          <div
            class="img"
            :style="{ 'background-image': 'url(https://pic.ecook.cn/web/'+item.coverId+'.jpg!wl280)' }"
            v-lazy:background-image="'https://pic.ecook.cn/web/'+item.coverId+'.jpg!wl280'"
          >
          <img class="playIcon" src="../assets/images/24gf-playCircle.png" alt="">
          </div>
          <div class="img-txt">
            <h2 class="one-txt-cut">{{ item.title }}</h2>
            <h4 class="line-ellipsis">{{ item.intro }}</h4>
          </div>
        </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ["caipuList","checked","flag"],
  data() {
    return {
      Tabflag: true,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      num:0,
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
          this.num = 0
        }

        if (this.caipuList.length>=10) {
          for (let i = this.num; i < this.num + 10; i++) {
            if (this.caipuList[i]!=undefined) {           
              this.list.push(this.caipuList[i]);
            }
          }
        }else if(this.caipuList.length<10){
          for (let i = this.num; i < this.caipuList.length; i++) {
            this.list.push(this.caipuList[i]);
          }
        }
      
        this.num += 10
        this.loading = false;

        if (this.list.length >= this.caipuList.length) {
          this.finished = true;
        }
        }, 500);
    },
    onRefresh() {
        // 清空列表数据
        this.finished = false
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
    },
  },
  created() {
    this.Tabflag = this.flag
  },
};
</script>

<style lang="less" scoped>
.content-lists {
  width: 100%;
  background-color: #f2f2f2;

    .turn{
        margin-top: 110px;
    }
  .videoList,
  .alllist {
    padding: 15px 20px;

    .lists-item {
      width: 100%;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 20px;
      .img {
        width: 100%;
        height: 160px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;

        .exclusive{
          width: 65px;
          height: 22px;
          position: absolute;
          right: 0;
          top: 0;
          display: block;
        }
        .playIcon{
          width: 45px;
          height: 45px;
          background-color: #fff;
          border-radius: 50%;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          margin: auto;
        }
      }
      .img-txt {
        padding: 10px;
        & > h2 {
          width: 100%;
          font-size: 16px;
          font-weight: bold;
          padding-bottom: 15px;
        }
        & > h4 {
          font-size: 16px;
          line-height: 22px;

        }
      }
    }
  }
  // .videoList {
  //   overflow: hidden;
  //   height: 260px;
  //   line-height: 260px;
  //   text-align: center;
  // }
  .emty {
    .videoList {
      overflow: hidden;
      height: 370px;
      line-height: 370px;
      text-align: center;

      .van-empty{
        height: 100%;
      }
    }
  }
}
</style>